<template>
    <div class="list">
       <ul class="ul">
           <li :class="{current: currentIndex === index}" v-for="(item,index) in arr" :key="index" @click="fun(index, item.name)">{{item.title}}</li>
       </ul>
       <div class="rigth">
         <router-view></router-view>
       </div>
    </div>
</template>

<script>
    export default {
        name:"List",
        data(){
            return{
                currentIndex:0,
                arr:[
                    {title: '服装',name:"Yi"},
                    {title: '电器',name:"Dian"},
                    {title: '生鲜',name:"Sheng"},
                    {title: '水果',name:"Xian"}
                ]

            };
        },
        methods:{
            fun(index,name){
             if(this.currentIndex === index){
                 console.log("激活");
                 return;

             }
             this.currentIndex = index;
             this.$router.push({name});
            }
        }
    }
</script>

<style lang="less" scoped>

.list{
    display: flex;
}
.ul{
    list-style: none;
  margin-top: 0;
  position: fixed;
  width: 94px;
//   background-color: #ccc;
  left: 0;
  top: 0;
  bottom: 51px;
  padding-left: 0;
  border-right:1px solid #f0f0f0 ;

}
.ul li{
    height: 50px;
    line-height: 50px;
    border-bottom:1px solid #f0f0f0 ;
    

}
.ul li.current{
     background-color: #e4393c;
     color: #fff;
}
.rigth{
    width: calc(100% - 95px);
    // background-color: #ccc;
    // height: 100%;
    position: fixed;
  right: 0;
  top: 0;
  bottom: 51px;
  padding-left: 0;
}
</style>